import { Select, FormControl, MenuItem, InputLabel } from '@mui/material'
import PropsType from "prop-types";
import { nanoid } from 'nanoid';

const MySelect = ({placeholder, label, field, multiple, disabled, menuList}) => {

  const labelId = nanoid()
  const selectId = nanoid()

  return (
    <FormControl variant="filled" style={{width: '100%'}}>
      <InputLabel id={labelId}>{label}</InputLabel>
      <Select
        disabled={disabled}
        multiple={multiple}
        labelId={labelId}
        id={selectId}
        {...field}
        placeholder={placeholder}
        label={label}
      >
        {
          menuList && menuList.length && menuList.map((item, index) => {
            return (
              <MenuItem value={item.value} key={index}>{item.label}</MenuItem>
            )
          })
        }
      </Select>
    </FormControl>
  )
}

MySelect.propTypes = {
  placeholder: PropsType.string,
  label: PropsType.string.isRequired,
  field: PropsType.object.isRequired,
  multiple: PropsType.bool,
  disabled: PropsType.bool,
  menuList: PropsType.array.isRequired
}

MySelect.defaultProps = {
  placeholder: '请选择',
  disabled: false,
  multiple: false
}

export default MySelect